<!-- 检验检疫货物规格 -->
<template>
    <Modal :value="value" @input="handleInput" width="746" :closable="false" class-name="CIQ-goods-spec">
        <div slot="header">
            检验检疫货物规格
            <Icon class="f-fr" type="ios-close" @click="closeModel"/>
        </div>
        <Form class="clearfix" inline ref="goodsSpecDataRef" :model="goodsSpecData" :rules="rule" :label-width="120">
            <FormItem label="成分/原料/组分" prop="ingredient">
                <Input v-model="goodsSpecData.ingredient" placeholder="成分/原料/组分" @keyup.native="setFocus" :disabled="editORshow" :maxlength="2000"></Input>
            </FormItem>
            <FormItem label="产品有效期" prop="validity">
                <DatePicker
                    v-model="goodsSpecData.validity"
                    type="date"
                    placeholder="产品有效期"
                    transfer
                    :editable="false"
                    :disabled="editORshow"
                    @keyup.native="setFocus"
                >
                </DatePicker>
            </FormItem>
            <FormItem label="产品保质期(天)" prop="expirationDate">
                <Input v-model="goodsSpecData.expirationDate" placeholder="产品保质期(天)" @keyup.native="setFocus" :disabled="editORshow" :maxlength="2000"></Input>
            </FormItem>
            <FormItem label="境外生产企业" prop="overseas">
                <Input v-model="goodsSpecData.overseas" placeholder="境外生产企业" @keyup.native="setFocus" :disabled="editORshow" :maxlength="2000"></Input>
            </FormItem>
            <FormItem label="货物规格" prop="goodsSpec">
                <Input v-model="goodsSpecData.goodsSpec" placeholder="货物规格" @keyup.native="setFocus" :disabled="editORshow" :maxlength="2000"></Input>
            </FormItem>
            <FormItem label="货物型号" prop="goodsModel">
                <Input v-model="goodsSpecData.goodsModel" placeholder="货物型号" @keyup.native="setFocus" :disabled="editORshow" :maxlength="2000"></Input>
            </FormItem>
            <FormItem label="货物品牌" prop="goodBrand">
                <Input v-model="goodsSpecData.goodBrand" placeholder="货物品牌" @keyup.native="setFocus" :disabled="editORshow" :maxlength="2000"></Input>
            </FormItem>
            <FormItem label="生产日期" prop="producedDate">
                <DatePicker
                    v-model="goodsSpecData.producedDate"
                    type="date"
                    placeholder="生产日期"
                    transfer
                    :editable="false"
                    @keyup.native="setFocus"
                    :disabled="editORshow"
                >
                </DatePicker>
            </FormItem>
            <FormItem label="生产批次" prop="productBatch">
                <Input v-model="goodsSpecData.productBatch" placeholder="生产批次" @keyup.native="setFocus" :disabled="editORshow" :maxlength="2000"></Input>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button type="default" @click="closeModel">取消</Button>
            <Button type="primary" @click="saveGoodsSpec">确定</Button>
        </div>
    </Modal>
</template>

<script>
import formatTime from '@/libs/formatTime'
import $ from 'jquery'

export default {
    name: 'CIQgoodsSpecModal',
    props: {
        value: {
            default: false,
            type: Boolean
        },
        CIQgoodsSpec: {
            default: function () {
                return {
                    goodsSpec: '',
                    editORshow: false
                }
            },
            type: Object
        }
    },
    data () {
        const validateExpirationDate = (rule, value, callback) => {
            let reg = /^\+?[1-9][0-9]*$/
            if (value && !reg.test(value)) {
                callback(new Error('请输入大于0的正整数'))
            } else {
                callback()
            }
        }

        return {
            formatTime,
            editORshow: null,
            goodsSpecData: {
                ingredient: '',
                validity: '',
                expirationDate: '',
                overseas: '',
                goodsSpec: '',
                goodsModel: '',
                goodBrand: '',
                producedDate: '',
                productBatch: ''
            },

            rule: {
                expirationDate: [
                    // {validator: validateExpirationDate, message: '请输入数字', trigger: 'blur'}
                    {
                        validator: validateExpirationDate,
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    mounted () {
        this.init(this.CIQgoodsSpec.goodsSpec, this.CIQgoodsSpec.editORshow)
    },
    methods: {
        init (goodsSpec, editORshow) {
            let tempArr = []
            this.editORshow = editORshow
            if (goodsSpec) {
                tempArr = goodsSpec.split(';')
                this.goodsSpecData.ingredient = tempArr[0]
                this.goodsSpecData.validity = tempArr[1]
                this.goodsSpecData.expirationDate = tempArr[2]
                this.goodsSpecData.overseas = tempArr[3]
                this.goodsSpecData.goodsSpec = tempArr[4]
                this.goodsSpecData.goodsModel = tempArr[5]
                this.goodsSpecData.goodBrand = tempArr[6]
                this.goodsSpecData.producedDate = tempArr[7]
                this.goodsSpecData.productBatch = tempArr[8]
            }

            setTimeout(() => {
                let ele = $('.CIQ-goods-spec .ivu-form > div:first').find('.ivu-input')
                $(ele).focus()
            }, 500)
        },
        handleInput (v) {
            this.$emit('input', v)
        },
        closeModel () {
            this.$refs['goodsSpecDataRef'].resetFields()
            this.$nextTick(() => {
                this.handleInput(false)
            })
        },

        saveGoodsSpec () {
            let obj = JSON.parse(JSON.stringify(this.goodsSpecData))
            obj.producedDate = obj.producedDate ? formatTime.ymd(obj.producedDate) : ''
            obj.validity = obj.validity ? formatTime.ymd(obj.validity) : ''
            let tempArr = []
            for (let i in obj) {
                tempArr.push(obj[i])
            }

            this.$refs['goodsSpecDataRef'].validate((valid) => {
                if (!valid) {
                    return false
                }
                this.$emit('saveGoodsSpec', tempArr.join(';')) // 传字符串，不传时间戳
                this.closeModel()
            })
        },

        setFocus (e) {
            if (e.keyCode === 13) {
                let target = $(e.target).parents('.ivu-form-item').next()

                if (target.find('.ivu-select-disabled').length > 0) {
                    target = target.next()
                }

                if (target.length === 0) { // 最后一个输入框
                    this.saveGoodsSpec()
                }

                if (target.find('.ivu-select-input').length) {
                    target.find('.ivu-select-input').focus()
                } else if (target.find('.ivu-input').length) {
                    target.find('.ivu-input').focus()
                }
            }
        }
    } // methods end
}
</script>

<style lang="less">
    .CIQ-goods-spec {
        input {
            width: 200px;
        }
    }
</style>
